<template>
  <ProTable
    :tableData="tableData"
    :colConfigs="columns"
    showNo="true"
    pagination="true"
    :pageable="pageable"
    :loading="loading"
  >
    <template #tag="{ row }">
      <div class="tag" :class="row.status == '启用' ? 'home' : 'office'">{{ row.status }}</div>
    </template>
    <template #operation="{ row }">
      <div>
        <el-button type="primary" :icon="Edit" circle @click="handleEdit(row)" />
        <el-button type="danger" :icon="Delete" circle />
      </div>
    </template>
  </ProTable>

  <div @click="handlePagination" ref="pagination">
    <Pagination :total="total" @handlePaginationChange="handlePaginationChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from 'vue'
import stateData from '../index.js'
import { getList, updateItem } from '@/api/user'
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = ref()
const pagination = ref()
const columns = ref([
  {
    prop: 'name',
    label: '名称'
  },
  {
    prop: 'content',
    label: '内容',
    width: '200px'
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'phone',
    label: '电话号码',
    width: '100px'
  },
  {
    prop: 'date',
    label: '添加日期',
    width: '120px'
  },

  {
    prop: 'address',
    label: '地址'
  },
  {
    prop: 'status',
    label: '标签',
    type: 'slot',
    slot_name: 'tag'
  },
  {
    label: '操作',
    type: 'slot',
    align: 'center',
    slot_name: 'operation'
  }
])
const props = defineProps({
  state: {
    type: Object,
    default: () => {}
  }
})
console.log('props.state', props.state)
const emit = defineEmits(['changeComponent'])
// 表格单选事件current-change返回两个值，newRow为当前选中行，oldRow为上一次选中行
const handlePagination = () => {
  console.log('点击了el-pagination外层div的元素内容')
}

const handleCurrentChange = (newRow, oldRow) => {
  console.log(newRow, oldRow)
}
const total = ref(0)
// 调用API获取表格数据
const getListData = () => {
  let params = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  getList(params).then(res => {
    // 解构赋值
    let { records, total: count } = res.data
    tableData.value = records
    total.value = count
    loading.value = false
    console.log(res)
  })
}
const pageSize = ref(10) // 单页容量
const pageIndex = ref(1) // 当前页码
let pageable = computed(() => {
  return {
    pageSize: pageSize.value,
    pageCurrent: pageIndex.value
  }
})
const loading = ref(false)
const handlePaginationChange = item => {
  pageIndex.value = item.currentPage
  pageSize.value = item.pageSize
  loading.value = true
  console.log(item)
  getListData()
}
onMounted(() => {
  if (props.state.data !== undefined) {
    updateItem(props.state.data).then(res => {
      console.log('数据更新')
      console.log(res)
      loading.value = true
      getListData()
    })
  }
})
/**
 * el-pagination中的下拉选项没有点击事件为其外层包裹点击事件，点击也不会触发事件，所以通过下面方法为其添加点击事件
 * 1、通过类名获取元素，之后对获取到的元素添加点击事件
 * 2、如果使用ref来获取元素，则需要放在nextTick中才能获取到元素
 */
nextTick(() => {
  getListData()
  // 获取指定元素中类名为el-input__inner的元素
  const handleSelect = pagination.value.getElementsByClassName('el-input__inner')
  // 获取所有类名为el-input__inner的元素
  // const handleSelect = document.getElementsByClassName('el-input__inner')
  console.log(handleSelect)
  handleSelect[0].addEventListener('click', function (e) {
    console.log('点击el-pagination下拉框触发')
  })
})
const handleEdit = item => {
  let obj = {}
  obj.title = 'demand2'
  obj.formOptions = [
    { label: '姓名', key: 'name', span: 8, type: 'input' },
    { label: '内容', key: 'content', span: 8, type: 'input', inputType: 'textarea', rows: '3' },
    {
      label: '标签',
      key: 'status',
      span: 8,
      type: 'select',
      selectOpt: [
        { label: '启用', value: '启用' },
        { label: '禁用', value: '禁用' }
      ]
    },
    {
      label: '性别',
      key: 'sex',
      span: 8,
      type: 'select',
      selectOpt: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ]
    },
    { label: '年龄', key: 'age', span: 4, type: 'input' },
    { label: '地址', key: 'address', span: 8, type: 'input' },
    { label: '日期', key: 'date', span: 8, type: 'date' },
    { label: '电话', key: 'phone', span: 8, type: 'input' }
  ]
  // 删除返回的对象中的id
  // let { id, ...newItem } = item
  obj.formData = item
  emit('changeComponent', obj)
}
</script>
<style lang="scss" scoped>
.tag {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
}
.home {
  background-color: lightgreen;
}
.office {
  background-color: rgb(177, 48, 48);
  color: white;
}
</style>
